<template>
	<view>
		<view class="backpack-box" @click="handleBackpack">
			<view class="gg-tips">{{ $t('backpack.backpack', 'Backpack') }}</view>
		</view>
		<uni-popup ref="backpackPopup" type="center">
			<view class="pup-box model-content">
				<image class="close-img" src="/static/img/close.png" mode="aspectFit" @click="closeBackpackPopup"></image>
				<view class="title">{{ $t('backpack.backpack', 'Backpack') }}</view>
				<view class="contents">
					<view class="tab-box flex-l">
						<view class="tab-item" :class="{ active: backpackType === 'seeds' }" @click="handleBackpackType('seeds')">{{ $t('backpack.seed', 'Seed') }}</view>
						<view class="tab-item" :class="{ active: backpackType === 'materials' }" @click="handleBackpackType('materials')">{{ $t('backpack.material', 'Material') }}</view>
						<view class="tab-item" :class="{ active: backpackType === 'items' }" @click="handleBackpackType('items')">{{ $t('backpack.props', 'Props') }}</view>
					</view>
					<view class="body-box">
						<template v-if="currentProducts.length > 0">
							<view class="item" v-for="item in currentProducts" :key="item.item_id || item.id">
								<image class="shop-img" :src="projectConfig.imgPrefix + item.image" mode="aspectFit"></image>
								<view class="num">X{{ item.num }}</view>
								<view class="text-overflow">{{ getItemDisplayName(item) }}</view>
							</view>
						</template>
						<view v-if="currentProducts.length === 0" class="no-data">
							<image class="img" src="/static/img/backpack-nodata.png" mode="aspectFit"></image>
							<view class="no-text">{{ $t('backpack.no_material_yet', 'No material yet') }}</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<loader />
	</view>
</template>

<script>
import { systemApi } from '@/request/system.js'
import projectConfig from '@/config/project.json'
import { mapState, mapGetters } from 'vuex'
import { languageMixin } from '@/utils/language-mixin.js'

export default {
	name: 'BackpackBox',
	mixins: [languageMixin],
	data() {
		return {
			backpackType: 'seeds',
			knapsackData: {
				seeds: [],
				items: [],
				materials: []
			},
			projectConfig
		}
	},
	computed: {
		...mapState('user', ['friendHomeMode']),
		currentProducts() {
			return this.knapsackData[this.backpackType === 'items' ? 'items' : this.backpackType === 'materials' ? 'materials' : 'seeds'] || []
		},
	},
	methods: {
		handleBackpack() {
			if (!this.friendHomeMode) {
				this.$refs.backpackPopup.open();
				this.fetchKnapsack()
			}
		},
		closeBackpackPopup() {
			this.$refs.backpackPopup.close();
		},
		handleBackpackType(type) {
			this.backpackType = type;
		},
		async fetchKnapsack() {
			try {
				uni.$emit('show-loading')
				const res = await systemApi.getKnapsack({ page: 1, limit: 200 })
				if (res && res.code === 200 && res.data) {
					// 根据API文档，返回数据结构为 { seeds: [], items: [], harvests: [] }
					this.knapsackData = {
						seeds: res.data.seeds.filter(item => item.num !== 0) || [],
						items: res.data.items.filter(item => item.num !== 0) || [],
						materials: res.data.materials.filter(item => item.num !== 0) || []
					}
				} else {
					this.knapsackData = {
						seeds: [],
						items: [],
						materials: []
					}
				}
			} catch (e) {
				console.error('Failed to get backpack content', e)
				this.knapsackData = {
					seeds: [],
					items: [],
					materials: []
				}
			} finally {
				uni.$emit('hide-loading')
			}
		},
		
		// 获取物品显示名称（使用多语言）
		getItemDisplayName(item) {
			return this.translateItemName(item)
		}
	}
}
</script>

<style scoped lang="scss">
.backpack-box {
	width: 145px;
	height: 127px;
	background: url(/static/img/backpack.png) no-repeat;
	background-size: 100% 100%;
	float: right;
	margin-right: 10px;
	margin-top: -30px;

	.gg-tips {
		width: 78px;
		height: 43px;
	}
}

.pup-box {
	background: url(/static/img/bg9.png) no-repeat;
	background-size: 100%;
	width: 323px;
	padding-top: 9px;
	height: 480px;

	.title {
		color: #fef9e2;
		font-weight: 700;
		font-size: 17px;
		text-align: center;
	}

	.contents {
		height: auto;
		padding: 0;
		padding-top: 22px;
		flex-wrap: wrap;

		.tab-box {
			width: 100%;
			padding-left: 8px;
			box-sizing: border-box;

			.tab-item {
				height: 22px;
				padding: 0 6px;
				box-sizing: border-box;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				background: #6ead63;
				color: #fef9e3;
				font-size: 16px;
				font-weight: 700;
				margin-right: 3px;

				&.active {
					color: #56984b;
					background: #fef9e3;
				}
			}
		}

		.body-box {
			width: 100%;
			height: 385px;
			overflow: auto;
			background: #fef9e3;
			box-shadow: 0 1px 3px 0 rgba(46, 105, 43, 0.6);
			border-radius: 6px;
			padding: 13px 0;
			box-sizing: border-box;
			flex-wrap: wrap;
			padding-left: 4px;
			padding-bottom: 0;

			.item {
				display: inline-block;
				overflow: hidden;
				float: left;
				width: 72px;
				height: 72px;
				border: 2px solid rgba(129, 192, 118, 0.5);
				border-radius: 6px;
				margin: 0 9px;
				margin-bottom: 17px;
				padding: 4px;
				box-sizing: border-box;
				color: #885625;
				font-size: 10px;
				text-align: center;
				line-height: 12px;
				position: relative;
				font-weight: 700;

				.shop-img {
					width: 44px;
					height: 44px;
					margin-bottom: 5px;
					text-align: center;
				}

				.num {
					position: absolute;
					height: 13px;
					line-height: 13px;
					background: rgba(61, 35, 9, 0.5);
					border-radius: 6px;
					padding: 0 6px;
					color: #fef9e3;
					font-size: 12px;
					right: 8px;
					bottom: 20px;
					font-weight: 700;
				}
			}

			.no-data {
				width: 100%;
				text-align: center;
				box-sizing: border-box;
				position: relative;
				z-index: 10;
				margin-top: 45px;

				.img {
					width: 81px;
					height: 72px;
					text-align: center;
				}

				.no-text {
					color: #a27b6e;
					font-size: 15px;
					font-weight: 700;
					margin-top: 12px;
				}
			}
		}
	}
}

.flex-l {
	display: flex;
}
</style>